<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryParamsRef" :inline="true" label-width="100">
      <el-form-item label="商户号" prop="merchantNoList" v-hasPermi="[9]">
        <el-select class="w-195" multiple v-model="queryParams.merchantNoList" placeholder="请选择" clearable >
          <el-option v-for="item in merchantListData" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="申请状态" prop="applyStatus">
        <el-select
          v-model="queryParams.applyStatus"
          placeholder="请选择"
          clearable
          style="width: 200px"
        >
          <el-option key="0" label="申请中" value="0"/>
          <el-option key="1" label="通过" value="1"/>
          <el-option key="2" label="未通过" value="2"/>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="交易类型" prop="jobGroup">
        <el-select
          v-model="queryParams.jobGroup"
          placeholder="请选择交易类型"
          clearable
          style="width: 200px"
        >
          <el-option key="0" label="类型1" value="0"/>
          <el-option key="1" label="类型2" value="3"/>
        </el-select>
      </el-form-item>
      <el-form-item label="提交时间" prop="status">
        <el-date-picker
          style="width: 400px"
          v-model="value1"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item label="交易时间" prop="status">
        <el-date-picker
          style="width: 400px"
          v-model="value1"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" icon="Search" @click="getList"
        >查询
        </el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <!-- <el-button icon="Download" type="warning" 
        >导出
        </el-button
        > -->
        <el-button icon="Plus" type="warning" @click="addApply" v-hasPermi="[1]"
        >新增
        </el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="tableData">
      <!-- <el-table-column
        label="提交时间"
        width="200"
        align="center"
        prop="jobId"
      /> -->
      <el-table-column align="center" label="提现金额" prop="applyBalance"/>
      <!-- <el-table-column align="center" label="费用" prop="type" /> -->
      <!-- <el-table-column align="center" label="资金类型" prop="type"/> -->
      <el-table-column align="center" label="处理状态" prop="applyStatusName"/>
      <!-- <el-table-column align="center" label="银行账户、USDT地址" prop="type" width="180"/>
      <el-table-column align="center" label="交易时间" prop="type"/>
      <el-table-column align="center" label="交易类型" prop="type" /> -->
      <el-table-column align="center" label="商户编号" prop="merchantNo"/>
      <el-table-column align="center" label="商户id" prop="merchantId"/>
      <el-table-column align="center" label="用户名称" prop="userName" />
      <el-table-column align="center" label="用户编号" prop="userCode" />
      <el-table-column align="center" label="用户id" prop="userId" />
      <el-table-column align="center" label="操作" v-hasPermi="[9]">
        <template #default="scope">
          <el-button
            size="small"
            type="warning"
            @click="requestHandler(scope.row)"
            v-show="scope.row.applyStatus == 0"
          >审核
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog v-model="processShow" title="提现审核" @close="resetHandle">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="审核结果" prop="applyResult">
          <el-select
          v-model="form.applyResult"
          placeholder="请选择"
          clearable
          style="width: 200px"
        >
          <el-option key="2" label="驳回" value="2"/>
          <el-option key="1" label="通过" value="1"/>
        </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetHandle">取消</el-button>
          <el-button type="primary" @click="confirmHandle"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {onMounted, reactive} from "vue";
import {merchantList, withdrawalData,processWithdrawal,addWithdrawal} from "@/api/deal/index.js";
import useUserStore from "@/store/modules/user";
import {checkPermi} from "@/utils/permission.js";
import { ElMessage,ElMessageBox } from "element-plus";

const userStore = useUserStore();

const {proxy} = getCurrentInstance();

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    merchantNoList: []
  },
  rules: {
    applyResult: [
      {required: true, message: "审核结果不能为空", trigger: "change"},
    ],

  },
});
const {queryParams, form, rules} = toRefs(data);
const total = ref(0);
const tableData = ref([])
// value = value.replace(/^(-)(\d+).(\d\d).$/,’$1$2.$3’).replace(/[^\d.]/g,’’)
const showUserId = computed(() => {
  return checkPermi([9])
})
const processShow=ref(false)
// 提现列表
function getList() {
  withdrawalData(queryParams.value).then(res => {
    const {total: totalNum, data} = res.data
    tableData.value = data
    total.value = totalNum
  })
}
const merchantListData = ref([]);
// 获取商户列表
function getMerchantList() {
  merchantList().then(res => {
    merchantListData.value = res.data.map(item => {
      return {
        value: item.merchantNo,
        label: item.merchantNo
      }
    })
  })
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryParamsRef");
  getList();
}
const applyId=ref()
// 提现审核
function requestHandler(row){
  processShow.value=true
  applyId.value=row.applyId
}
function resetHandle() {
  processShow.value = false;
  form.value = {};
  proxy.resetForm("formRef");
}
function confirmHandle(){
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      const data={
        applyId:applyId.value,
        applyResult:form.value.applyResult
      }
      processWithdrawal(data).then((res)=>{
        ElMessage.success('审核成功！')
        resetHandle()
        getList()
      })
}})
}
// 新增提现
function addApply(){
  ElMessageBox.prompt('请输入提现金额', '申请提现', {
    inputType: 'text',
    inputPlaceholder: '请输入金额',
    inputPattern:/^(?!0)\d{1,9}(\.\d{1,2})?$/,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(({ value }) => {
    addWithdrawal({applyPrice:value}).then((res) =>{
      ElMessage.success('申请提现成功！')
        getList()
    })
})
.catch(() => {
  resetHandle()
  })
}

onMounted(() => {
  if (showUserId.value) {
    getMerchantList();
  } 
    getList()
 
})
</script>
